<script setup>
import{ref}from'vue';
import{ElMessage}from'element-plus'
import{useRouter}from'vue-router';
const router=useRouter()
const form=ref({
    username:'',
    password:''
})
const rules=ref({
    username:[
        {required:true, message:'请输入用户名', trigger:'blur'},
        {min:3,max:12, message:'长度在3-12个字符', trigger:'blur'}
    ],
    password:[
        {required:true, message:'请输入密码', trigger:'blur'},
        {min:6,max:24, message:'长度在6-24个字符', trigger:'blur'}
    ]
})
const ruleFormRef=ref()
const submitForm=(formE1)=>{
  formE1.validate(valid=>{
    if(valid){
      if(form.value.username==='admin' && form.value.password==='123456'){
        ElMessage({
          message:'登陆成功',
          type:'success',
        })
        router.push('/home')
      } else {
        ElMessage.error("用户名或密码错误")
        form.value.username=''
        form.value.password=''
      }
    }
  })
}
const resetForm=(formE1)=>{
  fromE1.resetFields()
}
</script>

<template>
    <div class="login">
        <el-card>
    <template #header>
      <div class="card-header">
        <img src="../assets/images/logo.svg" alt="">
      </div>
    </template>
    <el-form
    ref="ruleFormRef"
    :model="form"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="登录名称:" prop="username">
      <el-input v-model="form.username" 
      type="text" 
      autocomplete="off" 
      />
    </el-form-item>
    <el-form-item label="登录密码:" prop="password">
      <el-input
        v-model="form.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        登录
      </el-button>
    </el-form-item>
  </el-form>
  </el-card>
    </div>
</template>
<style scoped>
.login{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: darkcyan;
    background-size: cover;
}
.el-card{
    width: 60%;
    max-width: 750px;
}
.card-header{
    text-align: center;
}
.btn{
    margin-left: 100px;
}
.el-button{
  width: 500px;
  background-color: darkcyan;
}
img{
  width: 80px;
}
</style>